<template>
    <div class="container">
        <div class="row mt-5 d-flex flex-row">
            <div class="col-12 col-md-7">
                <el-form :model="formData" :rules="rules" ref="form" label-width="100px" label-position="top">
                    <h3>账单地址</h3>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input v-model="formData.phone" placeholder="请输入电话号码"></el-input>
                    </el-form-item>
                    <el-form-item label="省市区">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-select v-model="formData.province" placeholder="----选择省份----" @change="loadCities">
                                    <el-option v-for="(province, index) in allProvinces" :key="index"
                                        :label="province.name" :value="province.name"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="formData.city" placeholder="----选择城市----" @change="loadDistricts">
                                    <el-option v-for="(city, index) in cities" :key="index" :label="city"
                                        :value="city"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="formData.district" placeholder="----选择区县----">
                                    <el-option v-for="(district, index) in districts" :key="index" :label="district"
                                        :value="district"></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="详细地址" prop="address">
                        <el-input type="textarea" v-model="formData.address" placeholder="请输入详细地址"></el-input>
                    </el-form-item>
                    <h3 class="mt-3">其他信息</h3>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="formData.remark" :rows="4"
                            placeholder="请填写备注信息（可选）"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <!-- <el-button type="primary" @click="handleSubmit">提交</el-button> -->
                    </el-form-item>
                </el-form>
            </div>
            <div class="col-12 col-md-5 orderinfo">
                <div class="card p-2">
                    <div class="card-body">
                        <h4>订单详情</h4>
                        <div class="row">
                            <div class="col-12 d-flex justify-content-between mt-2 plr">
                                <span>商品</span>
                                <span>合计</span>
                            </div>
                            <div class="col-12">
                                <div class="fg"></div>
                            </div>
                            <div v-for="item, index in 2"
                                class="col-12 shoplist d-flex justify-content-between align-items-center pt-2">
                                <div class="d-flex gap-2 align-items-center">
                                    <img src="../../assets/images/sp1.jpg" alt="">
                                    <span>顺口味 无尘豆腐猫砂6L 快速除臭结团</span>
                                    <span style="color: #777; font-weight: bold;"> x 2</span>
                                </div>
                                <span style="color: #777;">￥ 58.00</span>
                            </div>

                            <div class="col-12 d-flex justify-content-between subtotal">
                                <p>购物车小计</p>
                                <span>￥ 58.00</span>
                            </div>

                            <div class="col-12 d-flex justify-content-between subtotal">
                                <p>运费</p>
                                <span>￥ 10.00 </span>
                            </div>
                            <div class="col-12 d-flex justify-content-between subtotal">
                                <p>订单总计</p>
                                <span>￥ 126.00 </span>
                            </div>
                            <div class="col-12 mt-2">
                                <el-collapse accordion>
                                    <el-collapse-item>
                                        <template slot="title">
                                            支付宝 &nbsp; &nbsp; &nbsp;
                                            <img src="../../assets/images/zfb.png" alt="支付宝图标"
                                                style="vertical-align:middle; margin-right:8px;" />

                                        </template>
                                        <div>
                                            <el-radio v-model="selectedPaymentMethod" aria-hidden="false"
                                                label="alipay">
                                                使用支付宝付款
                                            </el-radio>
                                        </div>
                                    </el-collapse-item>
                                    <el-collapse-item>
                                        <template slot="title">
                                            微信支付 &nbsp; &nbsp; &nbsp;
                                            <img src="../../assets/images/wx.png" alt="微信支付图标"
                                                style="vertical-align:middle; margin-right:8px;" />

                                        </template>
                                        <div>
                                            <el-radio v-model="selectedPaymentMethod" aria-hidden="false"
                                                label="wechatpay">
                                                通过微信扫码支付
                                            </el-radio>
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>

                                <div class="col-12 d-flex justify-content-center mt-4">
                                    <div class="pay" style="width: 50%;" @click="handleSubmit">去支付</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import provinceList from '../../utils/provinceList.js';
export default {
    name: 'CreateOrder',
    data() {
        // 自定义电话号码验证函数
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入电话号码'));
            } else {
                const phonePattern = /^1[3456789]\d{9}$/; // 简单的中国大陆手机号码正则表达式
                if (!phonePattern.test(value)) {
                    return callback(new Error('请输入正确的电话号码'));
                }
                return callback();
            }
        };
        return {
            formData: {
                name: '',  // 姓名
                phone: '', // 电话
                province: '', // 省
                city: '', // 市
                district: '',  // 区
                address: '', // 详细地址
                remark: '' // 备注
            },
            allProvinces: provinceList, // 加载所有省份数据
            cities: [], // 动态填充城市选项
            districts: [], // 动态填充区县选项
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                phone: [
                    { required: true, validator: validatePhone, trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' }
                ]
            },

            // 支付方式
            selectedPaymentMethod: ''
        }
    },
    mounted() {

    },

    methods: {
        loadCities(province) {
            console.log(province);
            if (province) {
                const selectedProvince = this.allProvinces.find(p => p.name === province);
                if (selectedProvince) {
                    this.cities = selectedProvince.cityList.map(city => city.name);
                    this.districts = [];
                    this.formData.city = '';
                    this.formData.district = '';
                } else {
                    this.cities = [];
                    this.districts = [];
                    this.formData.city = '';
                    this.formData.district = '';
                }
            }
        },
        loadDistricts(city) {
            if (city && this.formData.province) {
                const selectedProvince = this.allProvinces.find(p => p.name === this.formData.province);
                if (selectedProvince) {
                    const selectedCity = selectedProvince.cityList.find(c => c.name === city);
                    if (selectedCity) {
                        this.districts = selectedCity.areaList;
                        this.formData.district = '';
                    } else {
                        this.districts = [];
                        this.formData.district = '';
                    }
                }
            } else {
                this.districts = [];
                this.formData.district = '';
            }
        },

        handleSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$message({
                        message: '支付成功',
                        type: 'success'
                    });
                    // console.log(this.formData);
                    // console.log(this.selectedPaymentMethod);
                    this.$router.push({
                        name: 'home',
                    });
                } else {
                    console.log(this.selectedPaymentMethod);
                    this.$message.error('请检查并填写完整信息');
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>
:deep(.el-form--label-top .el-form-item__label) {
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
    color: #4d4d4d;
}

:deep(.el-form-item) {
    margin-bottom: 12px;
}

:deep(.el-input__inner) {
    height: 45px;
    border-color: rgba(153, 153, 153, .6);
    border-radius: 0;
}

:deep(.el-textarea__inner) {
    /* height: 45px; */
    border-color: rgba(153, 153, 153, .6);
    border-radius: 0;
}

.orderinfo h4 {
    font-weight: bold;
}


.orderinfo .card {
    border: 3px solid #e8e8e8;
}

.orderinfo .fg {
    height: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: rgba(221, 221, 221, 1)
}

.orderinfo .plr {
    padding-left: 2rem;
    padding-right: 2rem;
}

.orderinfo .shoplist img {
    width: 45px;
    height: 45px;

}

.subtotal {
    margin-top: 1rem;
    border-top: 1px solid #e8e8e8;
    padding-top: .5rem;
    /* padding-bottom: .5rem; */
}

.subtotal p {
    /* font-size: 16px; */
    color: #444;
    padding: 0;
    margin: 0;
}

.subtotal span {
    font-size: 16px;
    color: #777;
}

/* 隐藏el-radio的默认样式 */
/deep/ input[aria-hidden="true"] {
    display: none !important;
}
/deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none !important;
}

.orderinfo .pay{
    font-size: 16px;
    font-weight: normal;
    color: #ffffff;
    border-color: #ff9003;
    background-color: #ff9003;
    height: 45px;
    line-height: 45px;
    /* padding-top: 15px; */
    /* padding-bottom: 15px; */
    /* padding-left: 60px; */
    /* padding-right: 60px; */
    background-image: none;
    text-align: center;
    letter-spacing: .5rem;
    cursor: pointer;
}
</style>